<template>
  <div class="app-container">
    <el-row :gutter="15">
<!--      左边列表-->
      <el-col :span="17" :xs="24">
        <div class="container">
          <el-row>
            <el-col :span="24" :xs="24">
              <div class="title">传输设备<i class="el-icon-caret-right"></i>历史告警</div>
            </el-col>
          </el-row>
          <!-- 搜索 -->
          <el-row style="margin-left: 20px;">
            <el-col :span="24" :xs="24">
              <Search
                  :search-data="searchData"
                  :search-params="queryParams"
                  @change="searchParamsUpdate"
                  @selectChange="selectChange"
              >
              </Search>
            </el-col>
          </el-row>
          <!--    增加-->
          <el-row :gutter="10">
            <el-col :span="1">
              <right-toolbar :showSearch.sync="showSearch" :columns="columns"></right-toolbar>
            </el-col>
          </el-row>
          <!--      表格-->
          <el-table
              :data="tableData"
              height="66vh"
              style="width: 100%;background: #002127;"
              :cell-style="{backgroundColor: '#002127',color: '#ffffff',}"
              :header-cell-style="{ backgroundColor: '#00484D',textAlign: 'center',fontWeight: 'bold',color: '#ffffff',borderBottom: '1px solid #00484D' }">
            <el-table-column prop="deviceId" label="设备ID" align="center" v-if="columns[0].visible"></el-table-column>
            <el-table-column prop="deviceName" label="设备名称" align="center" v-if="columns[1].visible"></el-table-column>
            <el-table-column prop="channelId" label="通道ID" align="center" v-if="columns[2].visible"></el-table-column>
            <el-table-column prop="channel" label="通道名称" align="center" v-if="columns[3].visible"></el-table-column>
            <el-table-column prop="alarmValue" label="告警值" align="center" v-if="columns[4].visible"></el-table-column>
            <el-table-column prop="setUpValue" label="设置值" align="center" v-if="columns[5].visible" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="alarmType" label="告警类型" align="center" v-if="columns[6].visible" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="time" label="告警时间" align="center" v-if="columns[7].visible" show-overflow-tooltip sortable></el-table-column>
          </el-table>
          <!--    分页-->
          <el-row>
            <el-col :span="24" :xs="24">
<!--              v-show="total>0"-->
              <pagination
                  :total="total"
                  :page.sync="queryParams.page"
                  :limit.sync="queryParams.limit"
              />
            </el-col>
          </el-row>
        </div>
      </el-col>
<!--      右侧-->
      <el-col :span="7" :xs="24">
        <el-row style="margin-bottom: 20px;">
          <el-col :span="24" :xs="24">
            <div class="container" style="height: 420px;">
              <div class="title" style="margin-top: 0px;padding-top: 10px;">告警类型占比</div>
              <div id="mains" style="width: 100%;height:340px;"></div>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 20px;">
          <el-col :span="24" :xs="24">
            <div class="container" style="height: 410px;">
              <div class="title" style="margin-top: 0px;padding-top: 10px;">告警趋势分析</div>
              <div id="main" style="width: 100%;height:335px;"></div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getRuleAllList, getDtuAllList, getAlarmHistory, getAlarmHistoryTrend, getAlarmHistoryType} from '@/api/automation'
import Search from '@/components/PageSearch'
import Pagination from "@/components/Pagination";
import RightToolbar from '@/components/RightToolbar'
export default {
  name: "actuals",
  components: { Search, Pagination, RightToolbar },
  data() {
    return {
      // 搜索
      searchData: [
        {
          type: 'select',
          label: '设备',
          prop: 'deviceId',
          options: [],
          placeholder: '请选择设备筛选'
        },
        {
          type: 'select',
          label: '通道',
          prop: 'channelId',
          options: [],
          placeholder: '请选择通道筛选'
        },
        {
          type: 'select',
          label: '告警类型',
          prop: 'alarmType',
          options: [{value: 1,label: '上限'},{value: 2,label: '下限'}],
          placeholder: '请选择告警类型筛选'
        },
        {
          type: 'datetime',
          label: '开始时间',
          prop: 'startTime',
          placeholder: '请选择开始时间',
          pickerOptions: {
            disabledDate: (t) => {
              return this.queryParams.endTime ? t.getTime() > new Date(this.queryParams.endTime).getTime() - 86400000 : false
            }
          }
        },
        {
          type: 'datetime',
          label: '结束时间',
          prop: 'endTime',
          placeholder: '请选择结束时间',
          pickerOptions: {
            disabledDate: (t) => {
              return this.queryParams.startTime ? t.getTime() < new Date(this.queryParams.startTime).getTime() : false
            }
          }
        }
      ],
      // 分页总条数
      total: 0,
      // 查询参数
      queryParams: {
        page: 1,
        limit: 20,
        deviceId: '',
        channelId: '',
        alarmType: '',
        startTime: '',
        endTime: ''
      },
      // 表格
      tableData: [],
      // 显示搜索条件
      showSearch: true,
      // 列信息
      columns: [
        { key: 0, label: `设备ID`, visible: true },
        { key: 1, label: `设备名称`, visible: true },
        { key: 2, label: `通道ID`, visible: false },
        { key: 3, label: `通道名称`, visible: true },
        { key: 4, label: `告警值`, visible: true },
        { key: 5, label: `设置值`, visible: true },
        { key: 6, label: `告警类型`, visible: true },
        { key: 7, label: `告警时间`, visible: true }
      ],
      dtuOption: [],
      channelOption: [],
      alarmType:[] //告警类型
    }
  },
  props: {},
  watch: {
    dtuOption: {
      handler(val) {
        this.searchData[0].options = this.dtuOption
      },
      immediate: true
    },
    channelOption: {
      handler(val) {
        this.searchData[1].options = this.channelOption
      },
      immediate: true
    },
  },
  created() {
    this.getDtuOption()
    let yesterday = new Date(new Date().setDate(new Date().getDate() - 20))
    this.queryParams.startTime = this.$moment(yesterday).format("YYYY-MM-DD HH:mm:ss")
    this.queryParams.endTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
  },
  mounted() {
    this.chartA()
    this.chartC()
  },
  methods: {
    //设备下拉
    getDtuOption() {
      getDtuAllList().then(res => {
        const data = res.data
        this.dtuOption = data.map(item => {
          return {
            value: item.id,
            label: item.name
          }
        })
      }).catch(err => {
        console.log(err)
      })
    },
    //通道下拉
    getChannelOption() {
      getRuleAllList(this.queryParams.deviceId).then(res => {
        const data = res.data
        this.channelOption = data.map(item => {
          return {
            value: item.id,
            label: item.name
          }
        })
      }).catch(err => {
        console.log(err)
      })
    },
    selectChange(val, item) {
      console.log('selectChange', val, item)
      if(item == 'deviceId'){
        this.queryParams.channelId = ''
        this.getChannelOption()
        this.chartD()
      }
      // if(item == 'channelId'){
      //   this.getCount()
      // }
    },
    getList() {
      getAlarmHistory(this.queryParams).then((res) => {
        console.log(res)
        this.total = res.dataCounts
        this.tableData = res.data || []
        res.data.map(item => {
          if (item.alarmType === 1) {
            item.alarmType = '上限'
          } else if (item.alarmType === 2) {
            item.alarmType = '下限'
          }
        })
      }).catch((err) => {
        console.log(err)
        // this.$message.error(err.errorMsg)
      })
    },
    // 新的搜索内容
    searchParamsUpdate() {
      if(this.queryParams.deviceId !='') {
        this.getList()
      }
      if(this.queryParams.deviceId !='' && this.queryParams.channelId !=''&& this.queryParams.startTime !='' && this.queryParams.endTime !='') {
        this.chartB()
        this.chartD()
      }
    },
    // 类型占比
    chartC(){
      const myChart = this.$echarts.init(document.getElementById('mains'))
      myChart.setOption({
        // title: {
        //   text: 'Nightingale Chart',
        //   subtext: 'Fake Data',
        //   left: 'center'
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // legend: {
        //   left: 'center',
        //   top: 'bottom',
        //   data: [
        //     'rose1',
        //     'rose2',
        //     'rose3',
        //     'rose4',
        //     'rose5',
        //     'rose6',
        //     'rose7',
        //     'rose8'
        //   ]
        // },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            // dataView: { show: true, readOnly: false },
            // restore: { show: true },
            // saveAsImage: { show: true }
          }
        },
        series: [
          {
            label: {//文本样式
              normal: {
                textStyle: {
                  fontSize:12  ,// 改变标示文字的大小
                  color:'#f1f1fe'
                }
              }
            },
            name: '告警类型占比',
            type: 'pie',
            radius: [20, 140],
            center: ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 5
            },
            // label: {
            //   show: false
            // },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 40, name: 'rose 1' },
              { value: 33, name: 'rose 2' },
              { value: 28, name: 'rose 3' },
              { value: 22, name: 'rose 4' },
              { value: 20, name: 'rose 5' },
              { value: 15, name: 'rose 6' },
              { value: 12, name: 'rose 7' },
              { value: 10, name: 'rose 8' }
            ]
          },
          // {
          //   name: 'Area Mode',
          //   type: 'pie',
          //   radius: [20, 140],
          //   center: ['75%', '50%'],
          //   roseType: 'area',
          //   itemStyle: {
          //     borderRadius: 5
          //   },
          //   data: [
          //     { value: 30, name: 'rose 1' },
          //     { value: 28, name: 'rose 2' },
          //     { value: 26, name: 'rose 3' },
          //     { value: 24, name: 'rose 4' },
          //     { value: 22, name: 'rose 5' },
          //     { value: 20, name: 'rose 6' },
          //     { value: 18, name: 'rose 7' },
          //     { value: 16, name: 'rose 8' }
          //   ]
          // }
        ]
      })
      myChart.resize();
    },
    chartD(){
      const myChart = this.$echarts.init(document.getElementById('mains'))
      const data1 = {
        // channelId: this.queryParams.channelId,
        deviceId: this.queryParams.deviceId,
        startTime: this.queryParams.startTime,
        endTime: this.queryParams.endTime,
        alarmType: this.queryParams.alarmType,
        limit: 500,
        page: 1
      }
      getAlarmHistoryType(data1)
          .then((res) => {
            this.alarmType = res.data.map(item => {
              return {
                value: item.value,
                name: item.name
              }
            })
            const datas = this.alarmType
            myChart.setOption({
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
              },
              toolbox: {
                show: true,
                feature: {
                  mark: { show: true },
                }
              },
              series: [
                {
                  label: {//文本样式
                    normal: {
                      textStyle: {
                        fontSize:12  ,// 改变标示文字的大小
                        color:'#f1f1fe'
                      }
                    }
                  },
                  name: '告警类型占比',
                  type: 'pie',
                  radius: [20, 140],
                  center: ['50%', '50%'],
                  roseType: 'radius',
                  itemStyle: {
                    borderRadius: 5
                  },
                  emphasis: {
                    label: {
                      show: true
                    }
                  },
                  data: datas
                },
              ]
            })
            myChart.resize();
            console.log(this.alarmType)
          })
          .catch((err) => {
            console.log(err)
            // this.$message.error(err.errorMsg)
          })
    },
    //  曲线分析
    chartA() {
      const myChart = this.$echarts.init(document.getElementById('main'))  // 先获得这个dom元素并初始化
      // 指定图表的配置项和数据
      myChart.setOption({
        backgroundColor:'#002127',
        // 指示线
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: "#006675"
            }
          }
        },
        // 折线颜色
        color: ['#006675'],
        // 图表距离容器距离
        grid: {
          left: '2%',
          right: '2%',
          top: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [{
          show: true,
          type: 'category',
          // 隐藏横向网格线
          splitLine: {
            show: false
          },
          data: ['2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010'],
          // x轴字体设置
          axisLabel: {
            rotate: 0, //倾斜角度
            color: '#ffffff',
          },
          // 横坐标刻度线
          axisTick: {
            show: false
          },
          // 坐标轴
          axisLine: {
            lineStyle: {
              color: '#999999',
            }
          },
          // y轴与坐标轴线对齐
          boundaryGap: true,
        }],
        yAxis: [{
          // name: '(mA)',
          type: 'value',
          // min: 0,
          // max: 250,
          // y轴字体设置
          axisLabel: {
            color: '#ffffff',
          },
          // y轴线条
          axisLine: {
            show: false
          },
          // 刻度线
          axisTick: {
            show: true
          },
          // 网格线
          splitLine: {
            show: true,
            lineStyle: {
              color: '#999999',
              type:'dashed',
            }
          }
        }],
        series: [
          {
            name: '设备数',
            type: 'line',
            smooth: true,
            symbolSize: 4,
            data: ['40', '80', '50', '170', '70', '100', '80', '180', '40', '10'],
          },
          {
            name:'上限值',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 4,
            itemStyle: {
              color: '#ffc500',
              borderColor: "#fff",
              borderWidth: 1,
            },
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
          },
          {
            name:'下限值',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 4,
            itemStyle: {
              color: '#ff5b29',
              borderColor: "#fff",
              borderWidth: 1,
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      });
    },
    chartB() {
      const myChart = this.$echarts.init(document.getElementById('main'))
      const data = {
        channelId: this.queryParams.channelId,
        deviceId: this.queryParams.deviceId,
        startTime: this.queryParams.startTime,
        endTime: this.queryParams.endTime,
        alarmType: this.queryParams.alarmType,
        limit: 500,
        page: 1
      }
      getAlarmHistoryTrend(data)
          .then((res) => {
            const up = res.data.up
            const down = res.data.down
            const value = res.data.value
            const time = res.data.time
            const names = res.data.channelName
            myChart.setOption({
              backgroundColor:'#002127',
              // 指示线
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    color: "#006675"
                  }
                }
              },
              // 折线颜色
              color: ['#006675'],
              // 图表距离容器距离
              grid: {
                left: '2%',
                right: '2%',
                top: '5%',
                bottom: '5%',
                containLabel: true
              },
              xAxis: [{
                show: true,
                type: 'category',
                // 隐藏横向网格线
                splitLine: {
                  show: false
                },
                data: time,
                // x轴字体设置
                axisLabel: {
                  rotate: 0, //倾斜角度
                  color: '#ffffff',
                },
                // 横坐标刻度线
                axisTick: {
                  show: false
                },
                // x坐标轴
                axisLine: {
                  lineStyle: {
                    color: '#999999',
                  }
                },
                // y轴与坐标轴线对齐
                boundaryGap: true,
              }],
              yAxis: [{
                // name: '(mA)',
                type: 'value',
                // y轴字体设置
                axisLabel: {
                  color: '#ffffff',
                },
                // y轴线条
                axisLine: {
                  show: false
                },
                // 刻度线
                axisTick: {
                  show: true
                },
                // 网格线
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#999999',
                    type:'dashed',
                  }
                }
              }],
              series: [
                {
                  name: names,
                  type: 'line',
                  smooth: true,
                  symbolSize: 4,
                  data: value,
                },
                {
                  name:'上限值',
                  type: 'line',
                  smooth: true,
                  symbol: 'circle',
                  symbolSize: 4,
                  itemStyle: {
                    color: '#ffc500',
                    borderColor: "#fff",
                    borderWidth: 1,
                  },
                  data: up
                },
                {
                  name:'下限值',
                  type: 'line',
                  smooth: true,
                  symbol: 'circle',
                  symbolSize: 4,
                  itemStyle: {
                    color: '#ff5b29',
                    borderColor: "#fff",
                    borderWidth: 1,
                  },
                  data: down
                }
              ]
            });
            myChart.resize();
          })
          .catch((err) => {
            console.log(err)
            // this.$message.error(err.errorMsg)
          })
    }

  }
}
</script>

<style lang='less' scoped>
.app-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #0C323A;
  .container {
    width: 100%;
    height: 100%;
    background: #002127;
    border-radius: 10px;
    .title {
      height: 42px;
      line-height: 42px;
      border-bottom: 1px solid #999999;
      color: #ffffff;
      font-size: 14px;
      margin-bottom: 15px;
      padding-left: 20px;
      margin-top: 10px;
    }
    // 显隐列
    .el-col-1 {
      float: right;
    }
  }
}
// 表格设置鼠标经过时背景颜色
::v-deep.el-table tbody tr:hover>td{
  background-color: #02565c !important;
}
//表格改变每行底边框颜色
::v-deep.el-table  td, .el-table th.is-leaf  {
  border-bottom:  1px solid rgba(0,231,231,0.302)!important;
}
/*table边框颜色*/
.el-table--border:after,
.el-table--group:after,
.el-table:before {
  background-color: #002127;
}
</style>

